import React, { useState, useEffect, useRef } from 'react';
import styles from './style.less';
import { Table, Row, Col, Button } from 'antd';
import Query from '@/components/Global/Query/index';
import Footer from '@/components/Global/Footer';
import { ColumnsType } from 'antd/es/table';
import { EffectColumn } from './data';
import { getTable } from './service';

const columns: ColumnsType<EffectColumn> = [
  {
    title: '计划名称',
    dataIndex: 'planName',
    key: 'planName',
    className: `${styles.content} ${styles.plan}`,
    // className: styles.content,
    width: 210,
    // align: 'center'
    // onCell(record, rowIndex) {
    //   console.log(record, rowIndex)
    //   return {
    //       className: styles[`.....`],
    //   };
    // }
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    sorter: (a, b) => a.status - b.status,
    // align: 'center',
    className: styles.content,
    width: 150,
  },
  {
    title: '推广平台',
    dataIndex: 'platformChannelName',
    key: 'platformChannelName',
    // align: 'center',
    className: styles.content,
    width: 200,
  },
  {
    title: '开始推广时间',
    dataIndex: 'startDateString',
    key: 'startDateString',
    // align: 'center'
    className: styles.content,
    width: 300,
  },
  {
    title: '展示次数',
    dataIndex: 'showCount',
    key: 'showCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击次数',
    dataIndex: 'clickCount',
    key: 'clickCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '点击率',
    dataIndex: 'clickRate',
    key: 'clickRate',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '访问次数',
    dataIndex: 'visitCount',
    key: 'visitCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '访问人数',
    dataIndex: 'visitUserCount',
    key: 'visitUserCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '线索人数',
    dataIndex: 'clueCount',
    key: 'clueCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '非无效客户',
    dataIndex: 'validUser',
    key: 'validUser',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '咨询次数',
    dataIndex: 'advisoryCount',
    key: 'advisoryCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '咨询人数',
    dataIndex: 'advisoryUserCount',
    key: 'advisoryUserCount',
    // align: 'center'
    className: styles.content,
    width: 100,
  },
  {
    title: 'IM',
    dataIndex: 'imCount',
    key: 'imCount',
    // align: 'center'
    className: styles.content,
    width: 300,
  },
  {
    title: '电话',
    dataIndex: 'mobileCount',
    key: 'mobileCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '表单',
    dataIndex: 'formCount',
    key: 'formCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '带看人数',
    dataIndex: 'takeLookCount',
    key: 'takeLookCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '成交人数',
    dataIndex: 'confirmCount',
    key: 'confirmCount',
    // align: 'center'
    className: styles.content,
    width: 150,
  },
  {
    title: '线索成交率',
    dataIndex: 'clueRate',
    key: 'clueRate',
    // align: 'center'
    className: styles.content,
    width: 150,
  }
];

const queryList = [
  {
    name: 'platformChannel',
    label: '推广平台',
    type: 'select',
    tips: '请选择推广平台',
    colNum: 5,
    children: []
  },
  {
    name: 'planName',
    label: '计划名称',
    type: 'input',
    tips: '请输入计划名称',
    colNum: 4
  },
  {
    name: 'status',
    label: '计划状态',
    type: 'select',
    tips: '请选择计划状态',
    colNum: 5,
    children: [
      {
        value: '0',
        label: '正常',
      },
      {
        value: '1',
        label: '失败',
      },
    ],
  },
  {
    name: 'time',
    label: '统计时间',
    type: 'date',
    colNum: 7,
    tips: '请选择计划状态',
  }
];

let params = {
  planName: '',
  status: [],
  platformChannel: '',
  startDate: '2021-07-19',
  endDate: '2021-07-19',
  page: 1,
  rows: 10,
};

export default function PlanTable(props: any) {
  console.log(props, '计划props');

  const [tableData, setTableData] = useState([]);
  const [page, setPage] = useState(1);
  const btnRef = useRef<any>(null!);
  // console.log(btnRef, '父组件');

  const reset = () => {
    const form = btnRef.current.getForm();
    form.resetFields();
    console.log('清空了表单开始处理逻辑');
    params = {
      planName: '',
      status: [],
      platformChannel: 'null',
      startDate: '2021-07-19',
      endDate: '2021-07-19',
      page: 1,
      rows: 10,
    };
    getTable(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res.list);
        setPage(res.pageNum * 1);
      }
    });
  };

  const query = (value: any) => {
    // console.log(value, '表单数据');
    params = {
      ...params,
      ...value,
    };
    getTable(params).then((res) => {
      // console.log(res, '请求结果');
      if (res) {
        setTableData(res.list);
        setPage(res.pageNum * 1);
      }
    });
  };

  useEffect(() => {
    getTable(params).then((res) => {
      console.log(res, '请求结果');
      if (res) {
        setTableData(res.list);
        setPage(res.pageNum * 1);
        // setTableData([]);
      }
    });
  }, []);
  return (
    <>
      <Query flag queryList={queryList} queryClick={query} resetClick={reset} ref={btnRef} />
      <Row>
        <Col flex="auto">
          <Table<EffectColumn>
            dataSource={tableData}
            columns={columns}
            pagination={false}
            rowKey={(record) => record.id}
            // locale={{ emptyText: "空空如也呀~" }}
            scroll={{ y: 600 }}
            className={styles.table}
          ></Table>
        </Col>
      </Row>
      <Footer
        footer={styles.footer}
        length={tableData.length}
        current={page}
        buttonGroup={
          <Button>导出数据</Button>
        }
      />
    </>
  );
}
